<template>
    <header class="initiator">
        <div class="logo-content">
            <div class="logo-container">
                <img src="../assets/logo.png" class="logo-img" alt="logo" />
                <span class="logo-text highlight">农耕智慧</span>
                <span class="logo-text">淘农收益一体化系统</span>
            </div>
        </div>
    </header>
    <div class="navigation-bar">
        <el-menu class="menu-content" mode="horizontal" :default-active="route.path" router v-cloak>
            <!-- 左侧一级菜单 -->
            <template v-for="item in filteredNavList" :key="item.name">
                <el-menu-item :index="item.to" v-if="!item.adminOnly || userStore.checkIsAdmin()">
                    {{ item.name }}
                </el-menu-item>
            </template>

            <el-menu-item disabled class="menu-spacer" />
            <el-submenu v-for="item in navListWithChildren" :key="item.name" :index="item.name">
                <template #title>
                    <span>设置</span>
                </template>
                <template v-for="child in item.children" :key="child.name">
                    <el-menu-item :index="child.to" @click="handleClick(child.to)">
                        {{ child.name }}
                    </el-menu-item>
                </template>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const navList = [
    { name: '首页', to: '/home/info' },
    { name: '商品货源', to: '/home/shop' },
    { name: '融资申请', to: '/home/loans' },
    { name: '用户管理', to: '/home/userControl', adminOnly: true },
    { name: '贷款管理', to: '/home/loansControl', adminOnly: true },
    {
        name: '设置',
        to: null,
        children: [
            { name: '个人中心', to: '/home/space' },
            { name: '退出', to: '' }
        ]
    }
]

const filteredNavList = computed(() => navList.filter(item => !item.children))
const navListWithChildren = computed(() => navList.filter(item => item.children))

// 点击处理函数
const handleClick = to => {
    if (to === '') {
        handleLogout()
    } else {
        router.push(to).catch(() => {})
    }
}
// 处理登出
const handleLogout = () => {
    userStore.clearUserInfo()
    router.replace('/login')
}

onMounted(async () => {
    await userStore.fetchUserInfo()
})
</script>

<style lang="less" scoped>
.initiator {
    width: 100%;
    height: 100px;
    background-color: #eaffea;
    display: flex;
    justify-content: center;

    .logo-content {
        width: 1200px;
        display: flex;
        align-items: center;
        height: 90px;

        .logo-container {
            display: flex;
            flex: 1;
            align-items: center;

            .logo-text {
                margin-left: 10px;
                font-size: 36px;
                color: #035d1c;
            }

            .logo-img {
                height: 70px;
                border-radius: 50%;
                margin: 0 20px;
            }

            .highlight {
                color: #4c4;
                margin-left: 10px;
                margin-right: auto;
            }
        }
    }
}

.navigation-bar {
    width: 100%;
    background-color: #4ab344;
    display: flex;
    justify-content: center;

    .menu-content {
        width: 1200px;
        display: flex;
        align-items: center;
        background-color: transparent;
        height: 60px;
    }

    .menu-spacer {
        flex: 1;
        pointer-events: none;
        cursor: default;
        background-color: transparent;
    }

    ::v-deep(.el-menu-item),
    ::v-deep(.el-sub-menu__title) {
        height: 60px !important;
        line-height: 60px !important;
        padding: 0 20px !important;
        color: white;

        &:hover {
            color: #4ab344;
            background-color: #fff;
        }
    }

    ::v-deep(.is-active) {
        color: #ffab1b;
        background-color: #fff;
        border-bottom: 2px solid #ffab1b;
    }
}
</style>
